<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ColumNav example: loading indicator</title>
    <script type="text/javascript" src="../js/yui//utilities.js"></script>
    <script type="text/javascript" src="../js/yui/container_core-min.js"></script>
    <script type="text/javascript" src="../js/carousel_min.js"></script>
    <script type="text/javascript" src="../js/columnav_min.js"></script>
    <link href="../css/examples.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
      try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
      var delay = null;
      function initLoading() {
          // do not show the loading graphic immediately, in case the
          // response returns quickly. This will not be the case in this
          // specific example. since the response delay is hard coded,
          // but it is a good practice nonetheless.
          delay = setTimeout('showLoading()', 500);
      }
      function showLoading() {
          YAHOO.util.Dom.setStyle('loading', 'visibility', 'visible');
      }
      function hideLoading() {
          if (delay)
              clearTimeout(delay);
          YAHOO.util.Dom.setStyle('loading', 'visibility', 'hidden');
      }
      function defeatStupidCacheInIE(type, args, me) {
          var target = args[0];
          target.href = target.href.replace(/\?.*$/,'') + '?' + new Date().getTime();
          return true;
      }
      function init() {
          var slow = document.getElementById('slow');
          var a = slow.getElementsByTagName('a')[0];
          // this is a hack for IE, to ensure the loading effect
          // shows every time
          defeatStupidCacheInIE(null, [a]);

          var cn_cfg = {
              prevElement: 'columnav-prev',
              datasource: slow,
              requestTimeout: 6000,
              requestHandler: initLoading,
              responseHandler: hideLoading,
              nextHandler: defeatStupidCacheInIE
          };
          var cn = new YAHOO.extension.ColumNav('columnav', cn_cfg);

          var sv_cfg = { url: location.href, modifier: 'HTML' };
          var sv = new YAHOO.extension.SourceViewer('source', sv_cfg);
      }
      YAHOO.util.Event.addListener(window, 'load', init);
    </script>
    <script type="text/javascript" src="../js/viewsource.js"></script>
    <link href="../css/stringify.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
      div#loading {
          background-image: url(../images/ajax-loader.gif);
          background-repeat: no-repeat;
          height: 16px;
          left: 104px;
          position: absolute;
          top: 42px;
          visibility: hidden;
          width: 16px;
          z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="content">
        <p style="float:right"><a href="../">Documentation</a></p>
        <h1>ColumNav</h1>
        <h2>Example</h2>
        <div class="prevButton">
          <a href="javascript:void(0)" id="columnav-prev">&lt; back</a>
        </div>
        <div id="columnav" class="carousel-component">
          <div class="carousel-clip-region">
            <ul class="carousel-list"></ul>
          </div>
          <div id="loading"></div>
        </div>
        <div class="viewsource" id="source"></div>
        <p>The ColumNav above is initialized from the list below. This example demonstrates how to use the <code>requestHandler</code> and <code>responseHandler</code> configuration properties to add a "loading" graphic to the interface for when an Ajax request is delayed.</p>
        <ul id="slow">
          <li><a href="ajax/slow.php" rel="ajax">slow loading</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
